<template>
    <div>
        <el-form label-position="right" :rules="rules" ref="form" :model="form" label-width="120px" class="ml200">
            <el-form-item label="名称：" prop="name">
                <el-input v-model="form.name" class="w600" :readonly="this.disabled"></el-input>
            </el-form-item>
            <el-form-item label="社区主任：" prop="director">
                <el-input v-model="form.director" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="类型：" prop="type">
                <el-select v-model="form.type" class="w600">
                    <el-option v-for="item in communitytypelist" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="地址：" prop="address">
                <el-input v-model="form.address" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="经度：" prop="longitude">
                <el-input v-model="form.longitude" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="纬度：" prop="latitude">
                <el-input v-model="form.latitude" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="四至：" prop="sz">
                <el-input v-model="form.sz" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="面积：" prop="measure_area">
                <el-input v-model="form.measure_area" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="辖区范围：" prop="scope">
                <el-input v-model="form.scope" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="实有户数：" prop="household_num">
                <el-input v-model="form.household_num" type="number" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="户籍数：" prop="household_register_num">
                <el-input v-model="form.household_register_num" type="number" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="民族情况：" prop="ethnic_situation">
                <el-input v-model="form.ethnic_situation" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="男性人数：" prop="male_num">
                <el-input v-model="form.male_num" type="number" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="女性人数：" prop="female_num">
                <el-input v-model="form.female_num" type="number" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="年龄段人数：" prop="agegroup_num">
                <el-input v-model="form.agegroup_num" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="弱势群体人数：" prop="weakness_num">
                <el-input v-model="form.weakness_num" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="社区建设时间：" prop="construction_time">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.construction_time" style="width:600px;"></el-date-picker>
            </el-form-item>
            <el-form-item label="筹备历史：" prop="preparatory_history">
                <el-input v-model="form.preparatory_history" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="获得荣誉：">
                <el-input v-model="form.gethonor" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="历史故事：">
                <el-input v-model="form.historical_stories" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="社区名人：">
                <el-input v-model="form.celebrities" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="人文特色：">
                <el-input v-model="form.characteristics" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="社区特色：">
                <el-input v-model="form.sqcharacteristics" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item label="区域特色：">
                <el-input v-model="form.qycharacteristics" type="textarea" :rows="3" class="w600"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="save" class="w600">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                disabled:true,
                communitytypelist: [],
                form: {
                    name:'',
                    director:'',
                    type:'',
                    address:'',
                    longitude:'',
                    latitude:'',
                    sz:'',
                    measure_area:'',
                    scope:'',
                    household_num:'',
                    household_register_num:'',
                    ethnic_situation:'',
                    male_num:'',
                    female_num:'',
                    agegroup_num:'',
                    weakness_num:'',
                    construction_time:'',
                    preparatory_history:'',
                    gethonor:'',
                    historical_stories:'',
                    celebrities:'',
                    characteristics:'',
                    sqcharacteristics:'',
                    qycharacteristics:''
                },
                rules: {   //验证
                    name: [
                        {required: true, message: '请输入社区名称', trigger: 'blur'}
                    ],
                    director: [
                        {required: true, message: '请输入社区主任', trigger: 'blur'}
                    ],
                    type: [
                        {required: true, message: '请输入社区类型', trigger: 'blur'}
                    ],
                    address: [
                        {required: true, message: '请输入社区地址', trigger: 'blur'}
                    ],
                    longitude: [
                        {required: true, message: '请输入社区经度', trigger: 'blur'}
                    ],
                    latitude: [
                        {required: true, message: '请输入社区纬度', trigger: 'blur'}
                    ],
                    sz: [
                        {required: true, message: '请输入四至', trigger: 'blur'}
                    ],
                    measure_area: [
                        {required: true, message: '请输入面积', trigger: 'blur'}
                    ],
                    scope: [
                        {required: true, message: '请输入社区辖区范围', trigger: 'blur'}
                    ],
                    household_num: [
                        {required: true, message: '请输入社区实有户数', trigger: 'blur'}
                    ],
                    household_register_num: [
                        {required: true, message: '请输入社区户籍数', trigger: 'blur'}
                    ],
                    ethnic_situation: [
                        {required: true, message: '请输入社区民族情况', trigger: 'blur'}
                    ],
                    male_num: [
                        {required: true, message: '请输入社区男性人数', trigger: 'blur'}
                    ],
                    female_num: [
                        {required: true, message: '请输入社区女性人数', trigger: 'blur'}
                    ],
                    agegroup_num: [
                        {required: true, message: '请输入社区年龄段人数', trigger: 'blur'}
                    ],
                    weakness_num: [
                        {required: true, message: '请输入社区弱势群体人数', trigger: 'blur'}
                    ],
                    construction_time: [
                        {required: true, message: '请输入社区社区建设时间', trigger: 'blur'}
                    ],
                    preparatory_history: [
                        {required: true, message: '请输入社区筹备历史', trigger: 'blur'}
                    ],
                },
            }
        },


        methods : {
            //初始化
            async init () {
                const res = await this.$http('dictList', {'type':'community_type'});
                this.communitytypelist = res;
                console.log('this.communitytypelist',this.communitytypelist)

                this.form = await this.$http('communityInfo');
                console.log('11',this.form)
                
                if(this.form == undefined || this.form == '' || this.form == null){
                    this.disabled = false
                    this.form = {}
                }
                
                console.log('this.form',this.form)
            },
            //保存
            async save () {
                var timestamp = this.form.construction_time;
                var d = new Date(timestamp);    //根据时间戳生成的时间对象
                var date = (d.getFullYear()) + "-" +
                    (d.getMonth() + 1) + "-" +
                    (d.getDate())
                this.form.construction_time = date
                console.log('shijian',this.form.construction_time)
                if (this.form.construction_time === 'NaN-NaN-NaN') {
                    this.form.construction_time = ''
                }
                const res = await this.$http('createCommunity',this.form);
                console.log('aaaa',res)
                if(res.count === 1){
                    this.$message({message: '保存成功',type: 'success'});
                    this.init();
                }else{
                    this.$message.error('保存失败');

                }
            }
        },

        mounted () {
            this.init();
        },

    }
</script>

<style scoped>
    .w180{
        width: 180px
    }
</style>
